<template>
  <div>
    <el-row type="flex">
      <el-col :xs="24" :sm="24" :md="18">
        <div class="article-left">
          <el-card>
            <!-- 标题 -->
            <div class="article-title">
              <h1>{{ data.title }}</h1>
              <div class="article-count">
                <nuxt-link :to="'/user/' + data.userId" target="_blank" class="nickname">
                  <i class="el-icon-user-solid"></i> {{ data.nickName }}
                </nuxt-link>
                <span>
                  <i class="el-icon-date"></i> {{ getDateFormat(data.updateDate) }}
                  <i class="el-icon-thumb"></i> {{ data.thumhup }}
                  <i class="el-icon-view"></i> {{ data.viewCount }}
                </span>

                <!-- 只能自己编辑自己的 -->
                <nuxt-link
                  v-if="$store.state.userInfo && $store.state.userInfo.uid === data.userId"
                  :to="{path:'/article/edit', query:{id: data.id} }"
                  class="nickname">&nbsp;&nbsp; 编辑</nuxt-link>


              </div>
              <!-- 加 style="margin: 5px;" 不然会紧密连接在一起 -->
              <el-tag
                style="margin: 5px;"
                v-for="item in data.labelList"
                :key="item.id"
                size="small"> {{ item.name }}
              </el-tag>
            </div>
            <!-- 内容 -->
            <div class="article-content">
              <!-- 1. 加上样式，2 使用 v-html 渲染 -->
              <article class="markdown-body" v-html="data.htmlContent"></article>
            </div>
            <el-button
              :disabled="!$store.state.userInfo"
              @click="handleThumb()"
              :plain="!isThumb"
              type="primary"
              icon="el-icon-thumb"
              size="medium">{{ thumbText }}
            </el-button>

          </el-card>


          <!-- 评论区 -->
          <div>
            <!-- 未登录 -->
            <el-card v-if="!$store.state.userInfo">
              <h4>登录后参与交流、获取后续更新提醒 {{ $store.state.userInfo }}</h4>
              <div>
                <!-- 不要以 / 开头，LoginPage -->
                <el-button @click="$store.dispatch('LoginPage')" type="primary" size="small">
                  登录
                </el-button>
                <el-button @click="$store.dispatch('LoginPage')" type="primary" size="small" plain>
                  注册
                </el-button>
              </div>
            </el-card>
            <el-card>
              <!-- userId 当前登录用户id，userImage 当前登录用户头像，showComment 显示评论区
              doSend 公共评论事件函数，doChidSend 回复评论事件函数, doRemove 删除 -->
              <mxg-comment
                :userId="userId"
                :userImage="userImage"
                :authorId="data.userId"
                :showComment="$store.state.userInfo ? true : false"
                @doSend="doSend" @doChildSend="doChildSend" @doRemove="doRemove"
                :commentList="this.commentList"
              ></mxg-comment>
            </el-card>
          </div>

        </div>
      </el-col>

      <!-- 右侧-->
      <el-col class="hidden-sm-and-down" :md="6">

        <el-row>
          <el-col>
            <!-- 固钉距离 80px -->
            <mxg-affix :offset="80">
              <div class="article-right">
                <!-- parentClass 指定文章内容的父元素class值 -->
                <mxg-directory parentClass="article-content"></mxg-directory>
              </div>
            </mxg-affix>
          </el-col>
        </el-row>

      </el-col>
    </el-row>
  </div>
</template>

<script>
// 高度显示样式
import '@/assets/css/md/github-markdown.css'
import '@/assets/css/md/github-min.css'

// 固钉
import MxgAffix from '@/components/common/Affix'

// 文章目录
import MxgDirectory from '@/components/common/Directory/index.vue'

// 评论组件 ++++++++++++++
import MxgComment from '@/components/common/Comment'

// 处理数据显示格式
import {dateFormat} from '@/utils/date.js'


export default {
  // 校验路由参数
  validate({params}) {
    // 必须是number类型
    return /^\d+$/.test(params.id)
  },

  // 标题信息
  head() {
    return {
      title: `${this.data.title}-文章-${this.data.firstTitle}`
    }
  },

  components: {MxgAffix, MxgDirectory, MxgComment},

  // 获取数据
  async asyncData({params, app}) {
    // 查询文章详情
    const {data} = await app.$getArticleById(params.id)

    // 更新浏览器、判断Cookie中是否已经存在
    const isView = app.$cookies.get(`article-view-${data.id}`)

    // 没有值，则更新浏览数
    if (!isView) {
      const {code} = await app.$updateArticleViewCount(data.id)
      if (code === 20000) {
        // 更新后页面上+1浏览数，省得再查询
        data.viewCount++
      }

      // 保存到cookie中，关闭浏览器后删除
      app.$cookies.set(`article-view-${data.id}`, true)
    }

    // 标题
    data.firstTitle = app.head.title;

    // 通过文章id查询所有评论信息
    const {data: commentList} = await app.$getCommentListByArticleId(data.id)

    // 请求回来的数据
    // console.log(data)
    return {data, commentList} //等价于 {data: data}
  },

  // 2. 声明一个方法，引用 date.js
  methods: {
    // 格式化数据
    getDateFormat(date) {
      return dateFormat(date)
    },

    // 处理点赞
    async handleThumb() {
      // 点击后取反，
      this.isThumb = !this.isThumb
      // 1 点赞，-1 取消赞
      const count = this.isThumb ? 1 : -1
      // 当前文章id
      const articleId = this.$route.params.id

      // 更新点赞数
      const {code} = await this.$updateArticleThumb(articleId, count)
      if (code === 20000) {
        // 更新页面显示点赞数
        this.data.thumhup = this.data.thumhup + count
        // 保存到cookie中， 注意是 this.$cookies
        this.$cookies.set(`article-thumb-${this.$route.params.id}`, this.isThumb, {
          maxAge: 60 * 60 * 24 * 365 * 2 // 保存2年
        })

      }
    },

    // 发布评论
    // 提交评论：评论内容，文章ID，登录用户信息（用户id，用户头像，用户昵称，用户头像）
    doSend(content) {
      console.log(`针对文章ID=${this.$route.params.id}发布评论内容：${content}`)
      this.doChildSend(content)

    },

    // 发布回复评论触发
    // 回复评论：父评论ID，评论内容，文章ID，登录用户信息（用户id，用户头像，用户昵称，用户头像）
    doChildSend(content, parentId = -1) {
      // console.log(`对父评论ID=${parentId} 发布的回复评论内容：${content}`)
      const data = {
        content,
        parentId,
        articleId: this.$route.params.id,
        userId: this.userId,
        userImage: this.userImage,
        nickName: this.$store.state.userInfo && this.$store.state.userInfo.nickName,
      }
      // 提交
      this.$addComment(data).then((response) => {
        //刷新评论
        this.refreshComment()
      })

    },

    // 客户端处  获取评论
    async refreshComment() {
      const {data} = await this.$getCommentListByArticleId(this.$route.params.id)
      this.commentList = data
    },


    // 删除评论
    async doRemove(id) {
      console.log(`删除评论id${id}`)
      const {code} = await this.$deleteCommentById(id)
      if (code === 20000) {
        await this.refreshComment()
      }
    },

  },

  // data
  data() {
    return {
      // 是否已点赞
      isThumb: this.$cookies.get(`article-thumb-${this.$route.params.id}`)
        ? this.$cookies.get(`article-thumb-${this.$route.params.id}`) : false,

      // 当前登录用户id
      userId: this.$store.state.userInfo && this.$store.state.userInfo.uid,

      // 当前登录用户头像，
      userImage: this.$store.state.userInfo && this.$store.state.userInfo.imageUrl
    }
  },
  computed: {
    thumbText: function () {
      return this.isThumb ? '取消点赞' : '点赞';
    }
  },


}
</script>

<style scoped>
@import '~@/assets/css/blog/article.css'; /* 不要少了分号 */
</style>
